<template>
  <view class="enterprise">
    <view class="enterprise-bg"></view>
    <!-- 碎石 -->
    <view class="more-stone"></view>
    <!-- 碎石中的大哥 -->
    <view class="big-stone"></view>
    <!-- 飞船 -->
    <view class="ship" @animationend="close"></view>
  </view>
</template>

<script>
export default {
  name: "enterprise-animation",
  methods: {
    close() {
      this.$emit("close");
    }
  }
};
</script>

<style lang="scss" scoped>
$offsetTop: 400rpx;

.enterprise {
  width: 750rpx;
  height: 100vh;
  position: fixed;
  top: 0;
  right: 0;
  background-color: #000;

  & > view {
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: absolute;
  }

  &-bg {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url("https://staticcdn.youliao.com/static/image/www_m/activity/festival/enterprise-bg.png");
    z-index: -1;
    background-position-y: center;
  }

  .more-stone {
    width: 75%;
    height: 100%;
    left: -15%;
    background-image: url("https://staticcdn.youliao.com/static/image/www_m/activity/festival/enterprise-stone.png");
    animation: stoneAni 1s infinite ease-in-out;
    background-position: right center;
  }

  @keyframes stoneAni {
    0% {
      transform: translate(-2rpx, -2rpx);
    }

    25% {
      transform: translate(0rpx, 0rpx);
    }

    75% {
      transform: translate(4rpx, 3rpx);
    }

    100% {
      transform: translate(0rpx, 0rpx);
    }
  }

  .big-stone {
    width: 160rpx;
    right: 150rpx;
    background-image: url("https://staticcdn.youliao.com/static/image/www_m/activity/festival/enterprise-big-stone.png");
    animation: stoneAni 1s infinite reverse;
    background-position: center;
  }

  .ship {
    width: 250rpx;
    animation: shipAni 3s forwards linear;
    z-index: -1;
    background-image: url("https://staticcdn.youliao.com/static/image/www_m/activity/festival/enterprise-ship.png");
    background-position: center;
  }

  @keyframes shipAni {
    0% {
      transform: scale(0.5) translateX(-180px) rotate(30deg);
    }

    50% {
      width: 250rpx;
      transform: translate(200rpx, 120rpx) rotate(15deg);
    }

    75% {
      opacity: 1;
    }

    100% {
      width: 10rpx;
      transform: translate(800rpx, 0rpx) rotate(-15deg);
      opacity: 0;
    }
  }
}
</style>
